<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" @loadData="loadData">
      <template #siteNameList="{ record }">
        {{ record.siteNameList[0] }}
        <a-popover>
          <div class="auth-nums" v-if="record.siteNameList.length > 1">+{{ record.siteNameList.length - 1 }}</div>
          <template #content>
            <div class="pop-orgs">
              <div v-for="(item, index) of record.siteNameList" :key="index">{{ item }}</div>
            </div>
          </template>
        </a-popover>
      </template>
      <template #carInfoList="{ record }">
        {{ +record.selectAllCarFlag === 1 ? '全部' : record.carlist ? null : record.carInfoList[0] }}
        <a-popover>
          <div class="auth-nums" v-if="record.carInfoList.length > 1">+{{ record.carInfoList.length - 1 }}</div>
          <template #content>
            <div class="pop-orgs">
              <div v-for="(item, index) of record.carInfoList" :key="index">{{ item }}</div>
            </div>
          </template>
        </a-popover>
      </template>
      <template #fenceList="{ record }">
        {{ record.fenceList[0] }}
        <a-popover>
          <div class="auth-nums" v-if="record.fenceList.length > 1">+{{ record.fenceList.length - 1 }}</div>
          <template #content>
            <div class="pop-orgs">
              <div v-for="(item, index) of record.fenceList" :key="index">{{ item }}</div>
            </div>
          </template>
        </a-popover>
      </template>
      <template #statusName="{ record }">
        <status-tag :value="record.status" :label="record.statusName" />
        <!-- <div class="flex items-center status-wrapper">
          <span :class="[+record.status !== 1 ? 'close' : 'open', 'status-icon']"></span>
          <span>{{ record.statusName }}</span>
        </div> -->
      </template>
    </table-index>
    <!-- 操作记录 -->
    <operate-log-modal ref="opreatelogRef" />
  </div>
</template>

<script setup name="FenceList">
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { usePageDict } from '@/hooks/useDict'
  import { getList, changeStatus } from '@/api/business/fence'
  import { ref, onMounted, reactive, computed } from 'vue'
  import useNavigate from '@/hooks/useNavigate'
  import operateLogModal from './components/operate-log-modal.vue'
  import { Modal, Message } from '@arco-design/web-vue'
  import { listColumns } from './options'

  const { navigateTo } = useNavigate()
  const opreatelogRef = ref()
  // 接口参数（不包含page信息）
  const queryParam = reactive({})

  // 查询条件
  const fenceDict = usePageDict('fenceDict')
  const searchList = computed(() => {
    return [
      { label: '围栏名称', prop: 'nameLike', type: 'a-input' },
      {
        label: '规则',
        prop: 'rule',
        type: 'a-select',
        options: fenceDict.vehiceFenceRuleEnum,
      },

      {
        label: '应用门店',
        prop: 'siteIdList',
        type: 'remote-select',
        attrs: {
          type: 'multiple_site_lease_list',
        },
      },

      {
        label: '围栏状态',
        prop: 'status',
        type: 'a-select',
        options: fenceDict.vehiceFenceStatusEnum,
      },
    ]
  })

  // 初始化
  const init = () => {
    loadData()
  }
  // table 配置
  const table = useTable({
    columns: listColumns,
    operates: [
      {
        label: '编辑',
        permission: 'svms:business:fence:edit',
        method: (record, _column, _rowIndex) => {
          navigateTo(`/vehice-fence/edit/${record.id}`, `${record.fenceName}-编辑`)
        },
      },
      {
        label: '启用',
        permission: 'svms:business:fence:enable',
        // 禁用状态显示启用按钮
        show: (record) => record.status == 0,
        method: (record) => {
          updateStatus(record, '启用')
        },
      },
      {
        label: '停用',
        permission: 'svms:business:fence:deactivate',
        // 禁用状态显示启用按钮
        show: (record) => record.status == 1,
        method: (record) => {
          Modal.confirm({
            title: '提示',
            simple: true,
            cancelText: '取消',
            okText: '确认',
            content: `请确认是否停用此围栏规则？`,
            onOk: () => {
              updateStatus(record, '停用')
            },
          })
        },
      },
      {
        label: '操作记录',
        permission: 'svms:business:fence:operaterecords',
        method: (record) => {
          opreatelogRef.value.open(record)
        },
      },
    ],
    buttons: [
      {
        type: 'primary',
        icon: 'plus',
        label: '新增',
        permission: 'svms:business:fence:add',
        method: () => handleAdd(),
      },
    ],
  })

  // 修改状态
  const updateStatus = (record, operateName) => {
    const param = {
      id: record.id,
      status: operateName == '启用' ? 1 : 0,
    }
    changeStatus(param).then(() => {
      Message.success(`${operateName}成功`)
      loadData()
    })
  }

  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getList)
  // 新增
  const handleAdd = () => {
    navigateTo('/vehice-fence/create')
  }

  // 删除气泡
  // mounted 调用接口
  onMounted(() => {
    init()
  })
</script>

<style lang="less" scoped>
  .status-wrapper {
    height: 28px;
    .status-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      &.open {
        background: #00b42a;
      }
      &.close {
        background: #ea0000;
      }
    }
  }
  .auth-nums {
    display: inline-block;
    background-color: #1890ff;
    border-radius: 10px;
    padding: 0 7px;
    color: #fff;
  }
  .pop-orgs {
    max-width: 760px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    div {
      background: #f2f3f5;
      margin-right: 10px;
      margin-bottom: 10px;
      padding: 2px 6px;
      border-radius: 2px;
      color: #1d2129;
      font-weight: 600;
      word-break: break-all;
    }
  }
</style>
